<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item>
				<el-input v-model="dataForm.name" placeholder="请输入商品名称" size="medium"
					class="input"
					clearable="clearable"></el-input>
			</el-form-item>
			<el-form-item>
					<el-button @click="searchHandle()">查询</el-button>
					<el-button type="primary" @click="addHandle()">新增商品</el-button>
					<el-button type="success" @click="inHandle()"
						:disabled="dataListSelections.length <= 0">上架商品</el-button>
						<el-button type="danger" @click="outHandle()"
							:disabled="dataListSelections.length <= 0">下架商品</el-button>
							<el-button type="danger" @click="deleteHandle()"
												:disabled="dataListSelections.length <= 0">批量删除</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
			style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center">
			</el-table-column>
			<el-table-column prop="id" header-align="center" align="center" label="ID" width="50px">
			</el-table-column>
			<el-table-column prop="name" header-align="center" align="center" label="名称">
			</el-table-column>
			<el-table-column prop="image" header-align="center" align="center" label="图片">
				<template slot-scope="scope">
					 <el-image
					      style="width: 100px; height: 100px"
					      :src="scope.row.image"
					      :fit="fit"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="detail" header-align="center" align="center" label="详情">
			</el-table-column>
			<el-table-column prop="price" header-align="center" align="center" label="单价(元)">
			</el-table-column>
			<el-table-column prop="stock" header-align="center" align="center" label="库存">
			</el-table-column>
			<el-table-column prop="status" header-align="center" align="center" label="是否上架">
			</el-table-column>
			<el-table-column  header-align="center" align="center" label="创建时间">
				 <template slot-scope="scope">
				          {{ new Date(scope.row.createTime).toLocaleString() }}
				        </template>
			</el-table-column>
			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="medium" @click="updateHandle(scope.row.id)">修改</el-button>
					<el-button type="text" size="medium" @click="deleteHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination align="right" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
	</div>
</template>

<script>
	import AddOrUpdate from './product-add-or-update'
	export default {
		data() {
			return {
				dataForm: {
					name:''
				},
				dataList: [],
				categoryList:[],
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				dataListLoading: false,
				dataListSelections: [],
				addOrUpdateVisible: false
			}
		},
		components: {
			AddOrUpdate
		},
		methods: {
			// 获取数据列表
			loadDataList() {
				this.dataListLoading = true;
				let data = {
					pageNum: this.pageIndex,
					pageSize: this.pageSize,
					name :this.dataForm.name
				};
				this.$http.post('/admin/product/list',data)
				.then(resp =>{
						let page = resp.data.page;
						let list = page.list;
							for(let one of list){
								one.price /= 100;
								if(one.status == 1){
									one.status = '已上架';
								}else if(one.status == 0){
									one.status = '已下架';
								}
							}
							this.dataList = list;
							this.totalCount = page.total;
							this.dataListLoading = false;
						});
					
				
			},
			searchHandle(){
				//先执行表单验证
				this.$refs['dataForm'].validate(valid =>{
					if(valid){
						this.$refs['dataForm'].clearValidate();
						if(this.dataForm.name == ''){
							this.dataForm.name == null;
						}
						if(this.pageIndex != 1){
							this.pageIndex = 1;
						}
						this.loadDataList();
					}else{
						return false;
					}
				});
			},
			loadCategoryList() {
				let data = {
					pageNum: this.pageIndex,
					pageSize: this.pageSize
				};
				this.$http.post('/admin/category/list',data).then(resp =>{
						let page = resp.data.page;
						let list = page.list;
						this.categoryList = list;
					});
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageIndex = 1
				this.loadDataList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val
				this.loadDataList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			addHandle() {
				this.addOrUpdateVisible = true;
				this.$nextTick(()=>{
					this.$refs.addOrUpdate.init();
				});
			},
			updateHandle(id) {
				this.addOrUpdateVisible = true;
				this.$nextTick(()=>{
					this.$refs.addOrUpdate.init(id);
				});
			},
			//上架商品
			inHandle(){
				let ids = this.dataListSelections.map(item=>{
					return item.id;
				});
				let sellStatus = 1;
				console.log(ids);
					this.$http.post('/admin/product/batchUpdateSellStatus',{ids:ids,sellStatus:sellStatus})
					.then(resp=>{
						if(resp.data.code == 200){
							this.$message({
								message: '操作成功',
								type: 'success',
								diration: 1200
							});
							this.loadDataList();
						} else{
							this.$message({
								message: '操作失败',
								type: 'error',
								diration: 1200
							});
						}
					}).catch(error=>{
						
					})
			},
			//上架商品
			outHandle(){
				let ids = this.dataListSelections.map(item=>{
					return item.id;
				});
				let sellStatus = 0;
				 let selected = this.dataListSelections.filter(item => ids.includes(item.id));
				    if(sellStatus === 1 && selected.some(item => item.sellStatus === 1)) {
				        this.$message.error('已经上架的商品无法再次上架');
				        return;
				    }
					this.$http.post('/admin/product/batchUpdateSellStatus',{ids:ids,sellStatus:sellStatus})
					.then(resp=>{
						if(resp.data.code == 200){
							this.$message({
								message: '操作成功',
								type: 'success',
								diration: 1200
							});
							this.loadDataList();
						} else{
							this.$message({
								message: '操作失败',
								type: 'error',
								diration: 1200
							});
						}
					}).catch(error=>{
						
					})
			},
			// 删除
			deleteHandle(id) {
				let ids = id ? [id] : this.dataListSelections.map(item=>{
					return item.id;
				});
				if(ids.length == 0){
					this.$message({
						message: '未能选中记录',
						type: 'warning',
						diration: 1200
					});
				} else{
					this.$confirm('确定要删除选中的记录？','提示',{
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(()=>{
								this.$http.post('/admin/product/delete',{ids:ids})
								.then(resp=>{
									if(resp.data.code == 200){
										this.$message({
											message: '操作成功',
											type: 'success',
											diration: 1200
										});
										this.loadDataList();
									} else{
										this.$message({
											message: '未能删除记录',
											type: 'warning',
											diration: 1200
										});
									}
								})
							}).catch(error=>{
								
							})
					}
				}
		},
		created: function() {
			this.loadDataList();
			this.loadCategoryList();
		}
	}
</script>